feat: add ability to disable animations in assertView #794
Conversation
| } | ||
| }; | ||
|
|
||
| exports.cleanupFrameAnimations = function cleanupFrameAnimations() { |
There was a problem hiding this comment.
В процессе отключения анимации, в руты вставляются style-элементы.
Эта функция __cleanupAnimation убирает из DOM-дерева эти элементы
| @@ -125,6 +147,43 @@ function prepareScreenshotUnsafe(areas, opts) { | |||
| }; | |||
| } | |||
|
|
|||
| function disableFrameAnimationsUnsafe() { | |||
There was a problem hiding this comment.
frame - потому что это происходит только в текущем фрейме (iframe тут не трогаются)
| @@ -125,6 +147,43 @@ function prepareScreenshotUnsafe(areas, opts) { | |||
| }; | |||
| } | |||
|
|
|||
| function disableFrameAnimationsUnsafe() { | |||
| var everyElementSelector = "*:not(#hermione-q.hermione-w.hermione-e.hermione-r.hermione-t.hermione-y)"; | |||
| var everythingSelector = ["", "::before", "::after"] | |||
There was a problem hiding this comment.
По итогу тут получаем сильный селектор, на который матчатся все элементы, ::before и ::after
| "{", | ||
| " animation-delay: 0ms !important;", | ||
| " animation-duration: 0ms !important;", | ||
| " animation-timing-function: step-start !important;", | ||
| " transition-timing-function: step-start !important;", | ||
| " scroll-behavior: auto !important;", | ||
| "}" |
There was a problem hiding this comment.
отключаем анимации, транзишены и делаем "грубый" скролл
| ].join("\n"); | ||
|
|
||
| root.appendChild(styleElement); | ||
| styleElements.push(styleElement); |
There was a problem hiding this comment.
В этом массиве хранятся style-элементы, которые удаляются из дерева при последующем вызове window.__cleanupAnimation
| const currImgInst = await screenShooter.capture(page, screenshoterOpts); | ||
| const currImgInst = await screenShooter | ||
| .capture(page, screenshoterOpts) | ||
| .finally(() => browser.cleanupScreenshot(opts)); |
There was a problem hiding this comment.
prepareScreenshot имеет сайд-эффекты в виде добавленных в DOM-дерево элементов. Тут эти сайд-эффекты чистим
| // https://github.com/webdriverio/webdriverio/issues/11396 | ||
| if (this._config.automationProtocol === "webdriver" && opts.disableAnimation) { | ||
| await this._disableIframeAnimations(); | ||
| } |
There was a problem hiding this comment.
В webdriver можем отключить анимацию во всех айфреймах. В devtools они отключаются только в текущем фрейме
Отключение анимации для родительского фрейма происходит в самом prepareScreenshot
| @@ -13,6 +13,7 @@ module.exports = { | |||
| diffColor: "#ff00ff", | |||
| tolerance: 2.3, | |||
| antialiasingTolerance: 4, | |||
| disableAnimation: true, | |||
There was a problem hiding this comment.
Для hermione@7 нужно выставить в false
| @@ -125,6 +147,43 @@ function prepareScreenshotUnsafe(areas, opts) { | |||
| }; | |||
| } | |||
|
|
|||
| function disableFrameAnimationsUnsafe() { | |||
| var everyElementSelector = "*:not(#hermione-q.hermione-w.hermione-e.hermione-r.hermione-t.hermione-y)"; | |||
There was a problem hiding this comment.
А почему hermione-q - это id, а остальные hermione-* - это классы? Или так и задумано?
There was a problem hiding this comment.
Это не имеет значения. Главное, чтоб у селектора был и айдишник, и несколько классов, тогда он будет специфичнее даже селектора по айдишнику
| @@ -13,6 +13,7 @@ module.exports = { | |||
| diffColor: "#ff00ff", | |||
| tolerance: 2.3, | |||
| antialiasingTolerance: 4, | |||
| disableAnimation: true, | |||
There was a problem hiding this comment.
Для hermione@7 нужно выставить в false
| return this._clientBridge.call("cleanupFrameAnimations"); | ||
| } | ||
|
|
||
| async _cleanupIframeAnimations() { |
There was a problem hiding this comment.
Я бы для этого метода и _disableIframeAnimations написал хелпер. Они же отличаются только вызовом одной функции, а все остальное в них одинаковое.
KuznetsovRoman
force-pushed
the
HERMIONE-1129
branch
2 times, most recently
from
be854ca to
087f111
Compare
BREAKING CHANGE: assertView now disables animations by default
KuznetsovRoman
force-pushed
the
HERMIONE-1129
branch
from
087f111 to
fc4dbe7
Compare
Что сделано
Добавил возможность отключать анимации при вызове
assertView